<template>
  <div id="save">
    <div class="title" @click="goback">&lt; 我的收藏</div>
    <div
      @click="goshop(item.mtWmPoiId)"
      class="store"
      v-for="(item, index) in this.$store.state.savelist"
      :key="index"
    >
      <div class="img-box">
        <img :src="item.picUrl" alt="" />
      </div>
      <div class="text">
        <div class="name">{{ item.name }}</div>
        <div class="sales">{{ item.monthSalesTip }}</div>
        <p>起送20远距离配送￥3</p>
        <div class="space">{{ item.distance }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    mounted(){
        this.$store.commit("getsavelist", { userid: localStorage.getItem('id') });
    },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    goshop(id) {
      console.log(id);
      this.$router.push({ path: "/shop/" + id });
    },
  },
};
</script>

<style scoped>
#save .title {
  font-size: 25px;
  color: lightskyblue;
}
#save .store {
  display: flex;
  height: 100px;
  margin: 20px 0;
  border-radius: 5px;
}
#save .store .img-box {
  width: 80px;
  margin-right: 10px;
}
#save .store .img-box img {
  width: 100%;
}
#save .store .text {
  flex: 1;
}
#save .store .text .name {
  font-weight: 700;
}
#save .store .text .sales,
#save .store .text .space,
#save .store .text p {
  line-height: 30px;
  font-size: 14px;
}
#save .store .text .space {
  float: right;
}
</style>